<script setup lang="ts" name="UserAssignment">
import { mapState } from 'pinia'
import { useModelerStore } from '@/store/bpmnProcess/modelerStore'
import { isUserAssignmentSupported, getUserAssignmentData, setValue } from '../../utils/userAssignment'
import EventEmitter from '@/utils/EventEmitter'

const mapStates = computed(() => {
  return mapState(useModelerStore, ['getActive'])
})

const form = ref({
  assignee: '',
  candidateUsers: '',
  candidateGroups: '',
  dueDate: '',
  followUpDate: '',
  priority: ''
})

const dueDateType = ref('string')
const followUpDateType = ref('string')

const dueDateTypeChange = () => {
  form.value.dueDate = ''
}

const followUpDateTypeChange = () => {
  form.value.followUpDate = ''
}

const initData = () => {
  form.value = getUserAssignmentData(mapStates.value.getActive())
  console.log(form.value, '用户分配数据')
  if (form.value.dueDate.includes('$')) {
    dueDateType.value = 'expression'
  }
  if (form.value.followUpDate.includes('$')) {
    followUpDateType.value = 'expression'
  }
}
const setFormValue = (type, value: string | undefined) => {
  setValue(mapStates.value.getActive(), type, value)
}

const eventEmitterListener = () => {
  if (isUserAssignmentSupported(mapStates.value.getActive())) {
    initData()
  }
}

onBeforeUnmount(() => {
  EventEmitter.removeListener('element-update', eventEmitterListener)
})

onMounted(() => {
  initData()
  EventEmitter.on('element-update', eventEmitterListener)
})
</script>

<template>
  <el-collapse-item name="user-assignment">
    <template #title>
      <div class="collapse-header">
        <svg-icon icon="ri:user-settings-fill"></svg-icon>
        <h2>用户分配</h2>
      </div>
    </template>
    <el-form-item label="处理用户">
      <el-input v-model="form.assignee" clearable @change="(v) => setFormValue('assignee', v)" />
    </el-form-item>
    <el-form-item label="候选用户组">
      <el-input v-model="form.candidateGroups" clearable @change="(v) => setFormValue('candidateGroups', v)" />
    </el-form-item>
    <el-form-item label="候选用户">
      <el-input v-model="form.candidateUsers" clearable @change="(v) => setFormValue('candidateUsers', v)" />
    </el-form-item>
    <el-form-item label="到期时间">
      <div class="item-content">
        <el-select v-model="dueDateType" @change="dueDateTypeChange">
          <el-option label="字符串" value="string" />
          <el-option label="表达式" value="expression" />
        </el-select>
        <el-input v-if="dueDateType === 'expression'" v-model="form.dueDate" clearable @change="(v) => setFormValue('dueDate', v)" placeholder="例如：${someDate}" />
        <el-date-picker v-else v-model="form.dueDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" clearable @change="(v) => setFormValue('dueDate', v)" />
      </div>
    </el-form-item>
    <el-form-item label="跟进时间">
      <div class="item-content">
        <el-select v-model="followUpDateType" @change="followUpDateTypeChange">
          <el-option label="字符串" value="string" />
          <el-option label="表达式" value="expression" />
        </el-select>
        <el-input v-if="followUpDateType === 'expression'" v-model="form.followUpDate" clearable @change="(v) => setFormValue('followUpDate', v)" placeholder="例如：${someDate}" />
        <el-date-picker v-else v-model="form.followUpDate" type="datetime" value-format="YYYY-MM-DD HH:mm:ss" clearable @change="(v) => setFormValue('followUpDate', v)" />
      </div>
    </el-form-item>
    <el-form-item label="优先级">
      <el-input v-model="form.priority" clearable @change="(v) => setFormValue('priority', v)" />
    </el-form-item>
  </el-collapse-item>
</template>

<style scoped lang="scss">
.el-collapse-item {
  :deep(.el-collapse-item__header) {

    .collapse-header {
      display: flex;
      flex: 1;
      align-items: center;
      padding: 0 12px;

      .el-icon {
        margin-right: 6px;
        font-size: 20px !important;
      }

      h2 {
        font-weight: bold;
        font-size: 14px;
      }

      .el-button {
        margin-left: 12px;
      }
    }

    .el-icon {
      font-size: 18px;
    }
  }

  :deep(.el-collapse-item__content) {
    padding-right: 12px;
    padding-bottom: 12px;
    padding-left: 12px;
  }
}

.el-form-item {
  :deep(.el-form-item__content) {
    margin-left: 0 !important;

    .el-button.add {
      width: 100%;
      margin: 12px 0 0;
    }
  }
}

.item-content {
  display: flex;
  flex: 1;
  padding: 6px;

  .el-select {
    flex: none;
    width: 90px;

    :deep(.el-input) {
      .el-input__wrapper.is-focus {
        z-index: 2;
      }
    }
  }

  >.el-input,
  .el-date-editor.el-input {
    flex: 1;
    margin-left: -1px;
  }

  :deep(.el-date-editor) {
    flex: 1;
    width: auto;
    margin-left: -1px;

    .el-input__wrapper {
      width: 100%;

      &.is-focus {
        z-index: 2;
      }
    }
  }
}
</style>
